<template>
	<Row>
		<Col span="4" style="padding-right: 10px;" v-show="showCategory">
			<div class="select-goods-tree">
				<Tree :data="category" @on-select-change="handleChangeCategory"></Tree>
			</div>
		</Col>
		<Col :span="showCategory?20:24">
			<Row style="margin-bottom: 3px;">
		    	<Col span="8" style="padding-right: 5px;">
		    		<Input v-model="filter.name" placeholder="输入项目名称搜索"></Input>
		    	</Col>
		    	<Col span="4">
		    		<Button type="primary" @click="handleFilter">搜索</Button>
		    	</Col>
		    </Row>
            <Table
                :columns="columns"
                :data="tableData"
                :loading="isLoading"
                :highlight-row="multiple ? false : true"
                border
                @on-current-change="handleSelect"
                @on-select="handleOnSelect"
                @on-select-cancel="handleOnSelectCancel"
                @on-select-all="handleOnSelectAll"
                @on-select-all-cancel="handleOnSelectAllCancel"
            ></Table>
            <div style="margin-top: 10px; text-align: right;">
            	<Page
            		:current="page.current"
            		:page-size="page.size"
            		:total="page.total"
            		show-total
            		show-elevator
            		show-sizer
            		@on-change="handleChangePage"
            		@on-page-size-change="handleChangePageSize"
            	/>
            </div>
		</Col>
	</Row>
</template>

<script>
import TableRows from '@/components/utils/table-rows.vue';
export default {
    components: {
        TableRows
    },
	name: 'proejctSelect',
	props: {
        // 值
		value: {
			type: Array,
			default: function() {
				return [];
			}
		},
        // 选择模式，true为多选，false为单选
        multiple: {
            type: Boolean,
            default: false
        },
        // 是否显示品类
		showCategory: {
			type: Boolean,
			default: true
		},
        // 上下架状态
        shelfStatus: {
            type: String,
            default: '1'
        },
        // 删除状态
        status: {
            type: String,
            default: '1'
        }
	},
	data() {
		return {
            isLoading: false,
            filter: {
                name: '',
                category_id: null
            },
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            checkeds: [],
            tableData: [],
			columns: [
				{
                    title: '基本信息',
                    minWidth: 250,
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.img || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',params.row.name),
                            h('p',[
                                h('span',{style:{color:'green'}}, params.row.category ? '#'+params.row.category.name : ''),
                                h('span',{style:{color:'red',marginLeft:'5px'}},params.row.tour ? '#'+params.row.tour.name : '')
                            ])
                        ])
                    }
                },
                {
                    title: '票面价',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.min_price +'起');
                    }
                },
                {
                    title: '服务商价',
                    minWidth: 50,
                    render: (h, params) => {
                        return h("span", {}, params.row.partner_min_price +'起');
                    }
                },
                {
                    title: '库存',
                    maxWidth: 80,
                    key: 'stocks'
                },
                {
                    title: '已售',
                    maxWidth: 80,
                    key: 'sales'
                },
                {
                    title: '演出时间',
                    minWidth: 100,
                    render: (h, params) => {
                        return h('div', [
                            h('p',params.row.show_start_at + '至'), 
                            h('p',params.row.show_end_at)
                        ])
                    }
                },
				{
				    title: '上架状态',
                    width: 84,
                    align: 'center',
				    render: (h, params) => {
				        return h('span', params.row.shelf_status == 1 ? '上架' : '下架');
				    }
				}
			]
		}
	},
    computed: {
        category() {
            return [
                {
                    id: 0,
                    title: '全部分类',
                    expand: true,
                    selected: true,
                    children: this.$store.state.data.categories.map(item => {
                        item.title = item.name;
                        return item;
                    })
                }
            ]
        }
    },
	mounted() {
        if(this.multiple) {
            this.columns.unshift({
                type: 'selection',
                width: 54,
                align: 'center'
            })
        }else{
            this.columns.unshift({
                title: '单选',
                width: 54,
                align: 'center',
                render: (h, params) => {
                    let id = this.checkeds[0] ? this.checkeds[0]['id'] : '';
                    return h('div', [
                        h('Icon', {
                            props: {
                                type: params.row.id === id ? 'ios-checkmark-circle' : 'ios-radio-button-off',
                                size: 20,
                                color: params.row.id === id ? '#2d8cf0' : '#dcdee2',
                            }
                        })
                    ])
                }
            })
        }
        this.$store.dispatch('getCategories');
		this.handleLoadData();
	},
    /* watch: {
        value: {
            deep: true,
            handler() {
                this.init();
            }
        }
    }, */
	methods: {
        init() {
            let ids = this.value.map(item => item.id);
            if(this.multiple) {
                this.tableData = this.tableData.map(item => {
                    if(ids.indexOf(item.id) !== -1) {
                        item._disabled = true;
                    }else{
                        item._disabled = false;
                    }
                    return item;
                });
            }else{
                this.checkeds = this.value;
                this.tableData = this.tableData.map(item => {
                    if(ids.indexOf(item.id) !== -1) {
                        item._highlight = true;
                    }else{
                        item._highlight = false;
                    }
                    return item;
                });
            }
        },
        handleFilter() {
            this.page.current = 1;
            this.handleLoadData();
        },
        handleLoadData() {
            const { filter, page } = this;
            let params = {
                status: 1,
                shelf_status: 1,
                name: filter.name,
                category_id: filter.category_id || null,
                page: page.current,
                pageSize: page.size
            }
            if (this.shelfStatus == 'all'){
                params.shelf_status = '';
            }
            if (this.status == 'all'){
                params.status = '';
            }
            
            this.isLoading = true;
            this.$ajax.get('/project/index', {params: params}).then(res => {
                let data = res.items || [];
                let ids = this.checkeds.map(item => item.id);
                // 多选
                if(this.multiple) {
                    let disableds = this.value.map(item => item.id);
                    // 设置勾选
                    this.tableData = data.map(item => {
                        if(disableds.indexOf(item.id) !== -1) {
                            item._disabled = true;
                        }else{
                            if(ids.indexOf(item.id) !== -1) {
                                item._checked = true;
                            }else{
                                item._checked = false;
                            }
                        }
                        return item;
                    });
                }else{
                    // 单选
                    this.tableData = data.map(item => {
                        if(ids.indexOf(item.id) !== -1) {
                            item._highlight = true;
                        }else{
                            item._highlight = false;
                        }
                        return item;
                    });
                }
                this.page.total = res.pageInfo.total;
                this.isLoading = false;
            }).catch(err => {
                this.isLoading = false;
            })
        },
        // 切换页码
        handleChangePage(page) {
            this.page.current = page;
            this.handleLoadData();
        },
        // 切换每页条数
        handleChangePageSize(size) {
        	this.page.current = 1;
        	this.page.size = size;
        	this.handleLoadData();
        },
        // 单选
        handleSelect(row) {
            this.checkeds = [row];
        },
        // 多选
        handleOnSelect(selection, row) {
            this.checkeds.push(row);
        },
        handleOnSelectCancel(selection, row) {
            this.checkeds = this.checkeds.filter(item => item.id !== row.id);
        },
        handleOnSelectAll(selection) {
            let ids = this.checkeds.map(item => item.id);
            let res = this.tableData.filter(item => ids.indexOf(item.id) === -1);
            this.checkeds = [...this.checkeds, ...res];
        },
        handleOnSelectAllCancel() {
            let ids = this.tableData.map(item => item.id);
            this.checkeds = this.checkeds.filter(item => ids.indexOf(item.id) === -1);
        },
        getCheckeds() {
            return this.checkeds.filter(item => !item._disabled);
        },
        clear() {
            this.checkeds = [];
            this.tableData = this.tableData.map(item => {
                if(item._checked) item._checked = false;
                if(item._highlight) item._highlight = false;
                return item;
            })
        },
		handleChangeCategory(row) {
			if(row.length == 0) return;
			this.filter.category_id = row[0].id || null;
            this.filter.name = '';
			this.handleFilter();
		}
	}
}
</script>

<style>
.select-goods-tree {
	position: relative;
    padding: 0 10px;
	width: 100%;
	height: 556px;
	border: 1px solid #dddee1;
    overflow: auto;
}
</style>